import Icon from '@/components/icon/icon.vue';
import { RouteRecordRaw } from 'vue-router';
import { useMenuStore } from './../../stores/menuStore';
import { useAuthUserStore } from './../../stores/authuserStore';
import _ from 'lodash';

/*
  子目录生成组件  依据Route中的路由结构生成侧边目录 
  // && _.find(authStore.menu, { name: routeItem.name })
 */

const menuStore = useMenuStore()
const authStore = useAuthUserStore()


const SubMenu = (routeProps: IMenu.IRouteItem): JSX.Element => <el-sub-menu index={routeProps.route.name} v-slots={{
  title: () => <>
    {routeProps.route.meta?.icon && <el-icon> <Icon name={routeProps.route.meta?.icon} /> </el-icon>}
    <span>{routeProps.route.name}</span>
  </>
}}>
  <el-menu-item-group>
    {
      routeProps.route.children.filter(<T extends RouteRecordRaw>(routeItem: T) => {
        return routeItem.meta?.inMenu
      }).map(<T extends RouteRecordRaw>(routeItem: T) => {
        return <ItemMenu route={routeItem} parent={routeProps.parent + '/' + routeProps.route.path} name={routeProps.name} />
      })
    }
  </el-menu-item-group>
</el-sub-menu>

const ItemMenu = (routeProps: IMenu.IRouteItem): JSX.Element => {
  const _index = routeProps.parent + '/' + routeProps.route.path
  return <el-menu-item
    index={_index}
    onClick={() => menuStore.menuSelectAction({ path: _index, name: routeProps.route.name }, routeProps.name)}
  >
    {routeProps.route.meta?.icon && <el-icon > <Icon name={routeProps.route.meta?.icon} style={{color: '#333'}} /> </el-icon>}
    <span style={{color: '#333333',fontSize: '16px', fontWeight: '600'}}>{routeProps.route.name}</span>
  </el-menu-item >
}



const MenuItem = (props: IMenu.IMenuItemProps): JSX.Element => {
  return <>
    {
      props.routerList[0]?.children.filter(<T extends RouteRecordRaw>(routeItem: T) => {
        return routeItem.meta?.inMenu
      }).map(<T extends RouteRecordRaw>(routeItem: T) => {
        const _props = { route: routeItem, parent: props.routerList[0].path, name: props.name }
        return routeItem.children ? <SubMenu {..._props} /> : <ItemMenu {..._props} />
      })
    }
  </>
}


export default MenuItem